<template>
    <div class="im-chat-input">
      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="emoji-trigger" ref="emojiContainer">
          <button 
            class="tool-btn"
            @click.stop="toggleEmojiPanel"
          >
            <svg t="1741585869526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2658" width="20" height="20">
              <path d="M511.488 118.670222a398.222222 398.222222 0 1 0 0 796.444445 398.222222 398.222222 0 0 0 0-796.444445z m0-85.333333a483.555556 483.555556 0 1 1 0 967.111111 483.555556 483.555556 0 0 1 0-967.111111zM292.067556 378.709333a69.063111 69.063111 0 1 1 138.126222 0 69.063111 69.063111 0 0 1-138.126222 0z m300.657777 0a69.063111 69.063111 0 1 1 138.183111 0 69.063111 69.063111 0 0 1-138.183111 0zM275.626667 545.336889h475.249777c0 108.828444-100.067556 239.502222-240.355555 239.502222-140.231111 0-234.894222-130.673778-234.894222-239.502222z" fill="#333333" p-id="2659"></path>
            </svg>
          </button>
          <chat-input-emoji 
            v-if="showEmojiPanel"
            @select="handleEmojiSelect"
          />
        </div>
        <button class="tool-btn" @click="handleFileSelect">
          <svg t="1741585969849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3691" width="20" height="20">
            <path d="M191.4 765.1c0 22.6 18.3 41 41 41h158.1c22.6 0 41-18.3 41-41 0-22.6-18.3-41-41-41H232.3c-22.6 0-40.9 18.3-40.9 41zM889.3 855.1h-40.9 16.2c13.8-0.8 24.7-12.2 24.7-26.2v26.2zM141.3 855.2h40.9H166c-13.8-0.8-24.7-12.2-24.7-26.2v26.2zM889.3 549.6h-40.9 16.2c13.8 0.8 24.7 12.2 24.7 26.2v-26.2zM809.6 346.9h-40.9 16.2c13.8 0.8 24.7 12.2 24.7 26.2v-26.2zM141.6 244h40.9-16.2c-13.8 0.8-24.7 12.2-24.7 26.2V244z" fill="#242424" p-id="3692"></path><path d="M906.1 468.1H232.3c-22.6 0-41 18.3-41 41 0 22.6 18.3 41 41 41h657v305.1h-748V244.1h287.3l52.7 81.4a40.98 40.98 0 0 0 36.1 21.5h291.9v63.4c0 22.6 18.3 41 41 41s41-18.3 41-41v-83.2c-3.2-34.7-32.3-61.8-67.8-61.8H769v-0.2H539.9L486 181.9l-0.6-0.9c-7.3-11.3-20-18.9-34.5-18.9H182.3v0.1h-54.5c-37.6 0-68.1 30.5-68.1 68.1v0.5h-0.1v643.6c2.4 32.8 28 59.1 60.5 62.6h787c33.1-1.5 60-26.6 64.3-58.9V529.7c-3.3-33.7-31.1-60.3-65.3-61.6z" fill="#242424" p-id="3693"></path>
          </svg>
        </button>
      </div>
  
      <!-- 输入区域 -->
      <div class="input-area">
        <textarea
          ref="inputRef"
          v-model="inputText"
          class="input-box"
          placeholder="输入消息..."
          @keyup.enter.exact="handleSend"
          @keydown.ctrl.enter.exact.prevent="handleNewLine"
          @keydown.exact="handleKeyDown"
        ></textarea>
      </div>
  
      <!-- 操作栏 -->
      <div class="action-bar">
        <button class="send-btn" @click="handleSend">发送(Enter)</button>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
  import ChatInputEmoji from './chat-input-emoji.vue';
  
  export default defineComponent({
    name: 'im-chat-input',
    components: {
      ChatInputEmoji
    },
    props: {
        // 发送消息
        send: {
            type: Function,
            default: (text: string) => {console.log('发送消息方法未重写',text)},
            required: true
        },
        // 选取文件后回调
        fileSelect: {
            type: Function,
            default: (files: FileList) => {console.log('选取文件方法未重写',files)},
            required: true
        },
        
    },
    setup(props, { emit }) {
      const inputText = ref('');
      const showEmojiPanel = ref(false);
      const emojiContainer = ref<HTMLElement | null>(null);
      const inputRef = ref<HTMLTextAreaElement | null>(null);
      
      // 发送消息
      const handleSend = () => {
        if (inputText.value.trim()) {
          props.send(inputText.value);
          inputText.value = '';
        }
      };
  
      // 选取文件
      const handleFileSelect = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.onchange = (e: Event) => {
          const files = (e.target as HTMLInputElement).files;
          if (files) {
            props.fileSelect(files);
            nextTick(() => {
              if (inputRef.value) {
                inputRef.value.focus();
                inputRef.value.selectionStart = inputRef.value.selectionEnd = inputText.value.length;
              }
            });
          }
        };
        input.click();
      };
  
      // 截图
      const handleScreenshot = () => {
        emit('screenshot');
      };
  
      const handleNewLine = () => {
        inputText.value += '\n';
      };
  
      // 回车
      const handleKeyDown = (e: KeyboardEvent) => {
        if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
          e.preventDefault();
          // handleSend();
        }
      };
  
      const toggleEmojiPanel = () => {
        showEmojiPanel.value = !showEmojiPanel.value;
      };
  
      const handleEmojiSelect = (emoji: string) => {
        inputText.value += emoji;
        showEmojiPanel.value = false;
        nextTick(() => {
          if (inputRef.value) {
            inputRef.value.focus();
            inputRef.value.selectionStart = inputRef.value.selectionEnd = inputText.value.length;
          }
        });
      };
  
      const handleClickOutside = (e: MouseEvent) => {
        if (
          emojiContainer.value &&
          !emojiContainer.value.contains(e.target as Node) &&
          showEmojiPanel.value
        ) {
          showEmojiPanel.value = false;
        }
      };
  
      onMounted(() => {
        document.addEventListener('click', handleClickOutside);
      });
  
      onBeforeUnmount(() => {
        document.removeEventListener('click', handleClickOutside);
      });
  
      return {
        inputText,
        handleSend,
        handleFileSelect,
        handleScreenshot,
        handleNewLine,
        handleKeyDown,
        showEmojiPanel,
        toggleEmojiPanel,
        emojiContainer,
        handleEmojiSelect,
        inputRef
      };
    }
  });
  </script>
  
  <style scoped>
  .im-chat-input {
    width: 100%;
    min-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    background: #fff;
  }
  
  .toolbar {
    width: 100%;
    display: flex;
    gap: 8px;
    padding: 0 16px 8px;
    box-sizing: border-box;
  }
  
  .tool-btn {
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
  }
  
  .tool-btn:hover {
    background: #f0f0f0;
  }
  
  .icon {
    vertical-align: middle;
    fill: #666;
  }
  
  .input-area {
    display: flex;
    margin: 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    min-width: 100%;
  }
  
  .input-box {
    flex: 1;
    width: 100%;
    min-width: 100%;
    min-height: 80px;
    max-height: 200px;
    padding: 8px;
    border: none;
    resize: none;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    background: transparent;
    outline: none;
  }
  
  .input-box:focus,
  .input-box:focus-visible,
  .input-box:active {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  .action-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
  }
  
  .send-btn {
    padding: 0 16px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: #07c160;
    color: white;
    cursor: pointer;
    transition: opacity 0.3s;
    font-size: 12px;
    margin: 8px 8px;
  }
  
  .send-btn:focus {
    outline: none;
    box-shadow: none;
  }
  
  *:focus {
    outline: none;
    box-shadow: none;
  }
  
  .tool-btn:focus {
    outline: none;
    box-shadow: none;
  }
  
  .emoji-trigger {
    position: relative;
    display: inline-block;
  }
  </style> 